<template>
  <button
    :class="switchClasses"
    :disabled="disabled"
    @click="toggleSwitch"
    type="button"
  >
    <span class="hjr-switch__handle"></span>
  </button>
</template>

<script>
export default {
  name: 'HjrSwitch',
  props: {
    modelValue: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'medium',
      validator: (value) => ['small', 'medium', 'large'].includes(value)
    }
  },
  emits: ['update:modelValue', 'change'],
  computed: {
    switchClasses() {
      return [
        'hjr-switch',
        `hjr-switch--${this.size}`,
        {
          'hjr-switch--checked': this.modelValue,
          'hjr-switch--disabled': this.disabled
        }
      ]
    }
  },
  methods: {
    toggleSwitch() {
      if (!this.disabled) {
        const newValue = !this.modelValue
        this.$emit('update:modelValue', newValue)
        this.$emit('change', newValue)
      }
    }
  }
}
</script>

<style scoped>
.hjr-switch {
  position: relative;
  display: inline-block;
  border: none;
  background-color: #ddd;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  outline: none;
}

.hjr-switch:focus {
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.hjr-switch__handle {
  position: absolute;
  top: 2px;
  left: 2px;
  background-color: white;
  border-radius: 50%;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 尺寸 */
.hjr-switch--small {
  width: 32px;
  height: 16px;
}

.hjr-switch--small .hjr-switch__handle {
  width: 12px;
  height: 12px;
}

.hjr-switch--medium {
  width: 44px;
  height: 22px;
}

.hjr-switch--medium .hjr-switch__handle {
  width: 18px;
  height: 18px;
}

.hjr-switch--large {
  width: 56px;
  height: 28px;
}

.hjr-switch--large .hjr-switch__handle {
  width: 24px;
  height: 24px;
}

/* 选中状态 */
.hjr-switch--checked {
  background-color: #667eea;
}

.hjr-switch--checked .hjr-switch__handle {
  transform: translateX(100%);
}

.hjr-switch--small.hjr-switch--checked .hjr-switch__handle {
  transform: translateX(16px);
}

.hjr-switch--medium.hjr-switch--checked .hjr-switch__handle {
  transform: translateX(22px);
}

.hjr-switch--large.hjr-switch--checked .hjr-switch__handle {
  transform: translateX(28px);
}

/* 禁用状态 */
.hjr-switch--disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.hjr-switch--disabled:focus {
  box-shadow: none;
}
</style>
